<template>
  <el-dialog :destroy-on-close="true" style="width: 40%;padding: 0 2%;">
    <template #header="{ titleId, titleClass }">
      <div style="height: 30px;margin-top: -2%;">
      </div>
    </template>
    <el-form ref="form" :model="form" label-width="135px" :rules="rules">
      <p style="margin: -10px 30px;">调整房态/房量</p>
      <el-divider></el-divider>
      <el-form-item label="设置房态：">
        <el-radio-group v-model="form.open">
          <el-radio label="维持不变"></el-radio>
          <el-radio label="设置开房"></el-radio>
          <el-radio label="设置关房"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="设置房量：" style="margin-bottom: 35px;">
        <el-radio-group v-model="form.count">
          <el-radio label="维持不变"></el-radio>
          <el-radio :label="count">
            设为<el-input style="width: 100px;margin-left: 10px;" v-model="count"></el-input>
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <p style="margin: -10px 30px;">调整房态/房量</p>
      <el-divider></el-divider>
      <el-form-item label="价格：" prop="price">
        <el-input style="width: 300px;" v-model="form.price"></el-input>
      </el-form-item>
      <el-form-item label="出售：" style="margin-bottom: 40px;" prop="buy">
        <el-input style="width: 300px;" v-model="form.buy"></el-input>
      </el-form-item>
    </el-form>
    <querenQuxiao @okHandler="okHandler" @cancelHandler="cancelHandler"></querenQuxiao>
    <div style="clear: both;"></div>
  </el-dialog>
</template>

<script>
import querenQuxiao from './queren_quxiao.vue'
export default {
  components: { querenQuxiao },
  props: ['dialogVisible'],
  data() {
    return {
      form: {
        open: '维持不变',
        count: '维持不变',
        price: '',
        buy: ''
      },
      count: '',
      rules: {
        price: [{
          required: true,
          message: '请输入房型价格',
          trigger: 'blur'
        },
        {
          pattern: /^\d+$/,
          message: '请输入数值型价格',
          trigger: 'blur'
        },
        {
            validator: async (rule, value, callback) => { 
                if (0<value && value <10) {
                  callback();
                } else {
                  callback(new Error('不得超过150元呦'));
                }
            },
            trigger: 'blur',
          }
        ],
        buy: [{
          required: true,
          message: '请输入房型出售数量',
          trigger: 'blur'
        },
        {
          pattern: /^\d+$/,
          message: '请输入数值型数量',
          trigger: 'blur'
        },
        {
            validator: async (rule, value, callback) => { 
                if (0<value && value <10) {
                  callback();
                } else {
                  callback(new Error('不得超过10个房间呦'));
                }
            },
            trigger: 'blur',
          }
        ]
      }
    }
  },
  methods: {
    okHandler() {
      this.$refs.form.validate((allRight) => {
        if (allRight) {
          this.$emit('dialogOk', {
            form: this.form
          })
        }
      })
    },
    cancelHandler() {
      this.$emit('dialogCancel');
    }

  },
  watch: {
    count() {
      if (this.form.count != '维持不变') this.form.count = this.count
    },
    dialogVisible() {

    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog__header {
  background-color: transparent !important;
}
</style>